import React, { Component } from 'react'
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/toolbox';
import 'echarts/lib/component/markPoint';
import 'echarts/lib/component/markLine';

export default class ChartZhu extends Component {
    componentDidMount() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main1'));
        // 绘制图表
        myChart.setOption({
            xAxis: {
                name: "单位: 日",
                data: ['02','06','10','14','18','22','26', '30']
            },
            yAxis: {
                name: '单位: 万元',
                type: 'value',
                boundaryGap: true,
                axisLine: {
                    show: true
                }
            },
            series: [{
                name: '今日金额',
                type: 'bar',
                data: [4302, 3102, 3920, 1202, 2232]
            }]
        })
    }
    render() {
        return (
            <div>
                <div id="main1" style={{ width: '96%', height: 300 }}></div>
            </div>
        )
    }
}